<template>
  <div id="root">
    <NavBar>订单填写</NavBar>
    
    <div id="first">
      <p>{{cate}}</p>
      <div id="first-bottom">
        <div id="bottom-item1">
          <span class="fa fa-exclamation-circle"></span>
          <span>购票须知>></span>
        </div>
        <div id="bottom-item2">
          <span>￥{{price}}</span>
          <span>/ 张</span>
        </div>
      </div>
    </div>

    <div id="second">
      <div id="second-item1">
        <span>出行日期</span>
        <div>
          <span ref="date">2017-11-07</span>
          <span>>></span>
        </div>
      </div>
      <div id="second-item2">
        <span>购买数量</span>
        <div>
          <span @touchstart="minus">-</span><input type="text" v-model.number="count"><span @touchstart="add">+</span>
        </div>
      </div>
    </div>

    <div id="third"></div>

    <div id="bar">
      <div>
        <span>总额：</span>
        <span>￥{{totalPrice}}</span>
      </div>
      <button @touchstart="submit">提交订单</button>
    </div>

  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import {mapState} from "vuex";

export default {
  data:function(){
    return {
      price:0,
      cate:"",
      count:1
    }
  },
  components:{
    NavBar,

  },
  computed:{
    ...mapState([
      "islogin"
    ]),
    totalPrice:function(){
      return this.price*this.count;
    }
  },
  methods:{
    add:function(){
      this.count++;
    },
    minus:function(){
      if(this.count>1){
          this.count--;
      }else{
        layer.msg("客官，不能再减了");
      }
    },
    submit:function(){
      var now = new Date();
      var obj = {
        ticket:this.cate,
        price:this.price,
        count:this.count,
        date:this.$refs.date.textContent,
        ordernum:now
      };
      // 因为支付页面也需要用这些数据，而订单页面不是通过路由到支付页面的，所以没法用路由传参，如果将这些共用的数据存在store.js中的话，它只能在支付页面第一次渲染时存在，如果刷新支付页面数据就会丢失。
      // 所以在订单页面将共用的数据存在本地，localStorage中，但是注意只能以json字符串的形式存，所以要先stringify一下。
      var piaoming = JSON.stringify(this.cate);
      localStorage.setItem("piaoming",piaoming);
      var num = JSON.stringify(now); 
      localStorage.setItem("num",num);
      if(this.islogin){
        layer.msg('订单生成中', {
          icon: 16
          ,shade: 0.01,
          time:1000
        });
        this.http.post("/api/users/order",obj)
        .then(res=>{
          setTimeout(function(){
          location.hash = "/my/viewlist/detail/order/pay";
        },1000);
        });
      }else{
        layer.msg("请先登录");
        location.hash = "/my/login";
      }
    }
  },
  mounted:function(){
    // console.log(this.$route.params);
    this.price = this.$route.params.val2*1;
    this.cate = this.$route.params.val1;
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #root{
    width:100vw;
  }
  #first{
    background-color:#F8F8F8;
    padding:8px 12px;
    border:solid 1px #dedede;
  }
  #first>p{
    margin:0;
    font-size:15px;
    color:#666;
  }
  #first-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  #bottom-item1 span:nth-of-type(1){
    font-size:16px;
    color:#FD9694;
  }
  #bottom-item1 span:nth-of-type(2){
    font-size:12px;
    color:#4e85c5;
  }
  #bottom-item2{
    padding:4px;
  }
  #bottom-item2 span:nth-of-type(1){
    font-size:14px;
    color:#ff6f6d;
  }
  #bottom-item2 span:nth-of-type(2){
    font-size:12px;
    color:#9b9b9b;
  }
  #second{
    background-color:white;
    border-bottom:solid 1px #dedede;
    padding:8px 0 8px 15px;
  }
  #second-item1{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:solid 1px #dedede;
    padding:8px 18px 11px 0;
    font-size:13px;
    color:#666;
  }
  #second-item2{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 18px 5px 0;
    font-size:13px;
    color:#666;
  }
  #second-item2>div{
    display:flex;
    align-items:center;
  }
  #second-item2>div span{
    display:inline-block;
    width: 39px;
    height: 28px;
    line-height: 28px;
    background-color: #f8f8f8;
    border: 1px solid #dedede;
    text-align:center;
    color:#ff6f6d;
  }
  #second-item2>div span:nth-of-type(1){
    font-size:35px;
  }
  #second-item2>div span:nth-of-type(2){
    font-size:25px;
  }
  #second-item2>div input{
    width: 38px;
    height: 28px;
    font-size: 14px;
    font-weight: bolder;
    line-height: 28px;
    color: #666;
    text-align: center;
    background: #fff;
    border:none;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
  }
  #third{
    height:425px;
    background-color:#FFF7F7;
  }
  #bar{
    height:41px;
    border-top:1px solid #dedede;
    display:flex;
    justify-content:space-between;
    box-shadow: 0 -3px 15px -2px rgba(0, 0, 0, 0.06);
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background: #fff;
  }
  #bar div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-left:10px;
  }
  #bar div span:nth-of-type(1){
    font-size: 12px;
    color: #666;
  }
  #bar div span:nth-of-type(2){
    font-size: 18px;
    color: #ff6f6d;
  }
  #bar button{
    border:none;
    width: 110px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background-color:#f34b4a;
  }
</style>
